<script setup>
import {listBorrow} from "@/api/system/borrow.js";
import dayjs from 'dayjs'
const borrowList = ref([]);
const loading = ref(true)
const tableData = ref([])
onMounted(() => {
  listBorrow({}).then(response => {
    borrowList.value = response.rows;
    let data = {}
    borrowList.value.forEach(item=>{
      if(data[item.deviceId] == null) {
        data[item.deviceId] = [item.deviceId];
        let days = dayjs(item.endTime).diff(item.startTime,'day');
        data[item.deviceId]= {
          deviceId: item.deviceId,
          deviceName: item.deviceName,
          cnt:1,
          days: days
        };
      }
      else{
        let days = dayjs(item.endTime).diff(item.startTime,'day');
        data[item.deviceId] = {
          deviceId: item.deviceId,
          deviceName: item.deviceName,
          cnt:data[item.deviceId].cnt+1,
          days: data[item.deviceId].days + days
        };
      }
    })
    // convert data to array
    let arr = [];
    for (let key in data) {
      arr.push(data[key]);
    }
    tableData.value= arr;
    loading.value = false
  });
});
</script>

<template>
  <div class="app-container">
    <h2>
      设备统计
    </h2>
    <el-table :load="loading" :data="tableData">
      <el-table-column prop="deviceId" label="设备ID">
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" />
      <el-table-column prop="cnt" label="借出次数" />
      <el-table-column prop="days" label="借出天数" />
    </el-table>
  </div>
</template>

<style scoped lang="scss">

</style>